<template>
    <img v-lazy="imgObj" :class="className"/>
    <!-- <img  border="0" v-lazy:background-image="{src: picture, error:error}" :class="className"   /> -->

    <!-- onerror="this.src = `${require(`${error.default}`)}`" -->
    <!-- :src="picture"   -->
</template>

<script>
export default {
    components: {},
    props: {
        isLazy: {
            type: Boolean,
            default: false
        },
        isJD: {
            //是否京东商品的图片
            type: Boolean,
            default: false
        },
        pic: String, //图片路径
        className: String, //类名
        options: {
            type: Object,
            default: () => {
                return {}
            }
        },
        error: {
            type: String,
            default: require('@/assets/images/default-goods-img.jpg')
        }
    },
    data() {
        return {}
    },

    computed: {
        picture() {
            let changePic = ''
            if (this.pic) {
                if (!this.isJD) {
                    let handPic =
                        Object.keys(this.options) && Object.keys(this.options).length != 0 ? this._handleResize(this.pic, this.options) : this.pic
                    changePic = this.$imgUrlHead + handPic
                } else {
                    // 需要在前面添加 http://img13.360buyimg.com/n0/  (末尾有/)，其中 n0(最大图 800*800px)、n1(350*350px)、n2(160*160px)、n3(130*130px)、n4(100*100px) 为图片大小。
                    // 也可以在前面添加 http://img13.360buyimg.com/n0/s450x550_其中 s450x550_ 是自定义的450*550的图片大小(注意末尾有一个下划线，没有/) ，其中n0带有京东水印，用其余的n1-n4不带水印。
                    // s450x450_可以调整450和550为任意大小，利用n0-n4以及s450x450_可以调整图片为任意大小且选择是否要水印。n12 大图无水印。
                    let n = 1
                    if (Object.keys(this.options).length != 0 && this.options && this.options.w) {
                        // if (this.options.w>350) {
                        //     n = 12
                        // } else if(this.options.w>160){
                        //     n = 1
                        // } else if(this.options.w>130){
                        //     n = 2
                        // } else if(this.options.w>100){
                        //     n = 3
                        // } else if(this.options.w<100){
                        //     n = 4
                        // }
                        n = 12
                    }
                    let s = ''
                    if (Object.keys(this.options).length != 0 && this.options && this.options.w && this.options.h) {
                        s = `s${this.options.w * 2}x${this.options.h * 2}_`
                    }
                    let jdURL = `http://img13.360buyimg.com/n${n}/${s}`
                    changePic = jdURL + this.pic
                }
            }
            return changePic
        },
        imgObj() {
            let a = {
                src: this.picture,
                error: this.error
            }
            return a
        }
    },
    mounted() {},
    methods: {
        /**
         * 阿里云图片缩放
         * 缩放图限制：缩放图宽与高的乘积不能超过4096 px*4096 px，且单边长度不能超过4096 px。
         * @param {*} imageUrl
         * @param {*} options 按比例的时候接收 scale
         */
        _handleResize(imageUrl, options) {
            let params = `${imageUrl}?x-oss-process=image/resize,`
            if (!options.limit) {
                options.limit = 0
            }
            if (!options.m) {
                options.m = 'fixed'
            }
            for (const key in options) {
                switch (key) {
                    case 'm':
                        //指定缩放的模式。
                        // lfit（默认值）：等比缩放，缩放图限制为指定w与h的矩形内的最大图片。
                        // mfit：等比缩放，缩放图为延伸出指定w与h的矩形框外的最小图片。
                        // fill：将原图等比缩放为延伸出指定w与h的矩形框外的最小图片，之后将超出的部分进行居中裁剪。
                        // pad：将原图缩放为指定w与h的矩形内的最大图片，之后使用指定颜色居中填充空白部分。注意，当给出的指定w和h大于原图片尺寸时，只有这个pad生效，其它模式只有当limit=0时才会生效
                        // fixed：固定宽高，强制缩放。
                        params = `${params}m_${options[key]},`
                        break
                    case 'w':
                        //指定目标缩放图的宽度。
                        params = `${params}w_${options[key] * 2},`
                        break
                    case 'h':
                        //指定目标缩放图的高度
                        params = `${params}h_${options[key] * 2},`
                        break
                    case 'l':
                        //指定目标缩放图的最长边
                        //说明 长边是指原尺寸与目标尺寸的比值大的那条边；短边是指原尺寸与目标尺寸的比值小的那条边。
                        //例如原图为400 px*200 px，缩放为800 px*100 px。由于（400/800）<（200/100），所以在这个缩放操作中，200那条是长边，400那条是短边。
                        params = `${params}l_${options[key]},`
                        break
                    case 's':
                        //指定目标缩放图的最短边。
                        params = `${params}s_${options[key]},`
                        break
                    case 'limit':
                        //指定当目标缩放图大于原图时是否进行缩放。
                        //1（默认值）：表示不按指定参数进行缩放，直接返回原图。
                        //0：按指定参数进行缩放。
                        params = `${params}limit_${options[key]},`
                        break
                    case 'color':
                        //当缩放模式选择为pad（缩放填充）时，可以设置填充的颜色
                        params = `${params}color_${options[key]},`
                        break
                    case 'p':
                        //按百分比缩放图片。
                        //[1,1000] 小于100为缩小，大于100为放大。
                        //其中GIF格式的图片支持指定宽高缩放，不支持等比缩放（等比缩放情况下，动态图会变成静态图）。
                        //目标缩放图比原图尺寸大时，默认返回原图。您可以增加limit_0参数放大图片。
                        params = `${params}p_${options[key]},`
                        break
                    default:
                        break
                }
            }
            params = params.substr(0, params.length - 1)
            return params
        }
    }
}
</script>
<style scoped>
img {
    border-color: #fff !important;
    background-size: 100% 100%;
}
img[lazy=loading] {
    /*your style here*/
		object-fit: contain;
		background-color: #f8f8f8 !important;
}
 
img[lazy=error] {
    /*your style here*/
		object-fit: contain;
		background-color: #f8f8f8 !important;
}

/* img:not([src]){ display:none; } */
</style>
